<script setup>
import {ref} from "vue";
import {
  ChatLineRound,
  FullScreen, HomeFilled,
  House,
  Location, Memo, Message,
  OfficeBuilding,
  Operation,
  RefreshLeft,
  Setting, TrendCharts, Trophy
} from "@element-plus/icons-vue";
import screenfull from "screenfull";

const isCollapse = ref(false)
const fullScreen = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle()
  }
}
const fresh = () => {
  location.reload()
}
</script>

<template>
  <div class="manageWelcomeInfo">
    <div class="common-layout">
      <el-container>
        <div class="menu_all">
          <el-button @click="isCollapse = !isCollapse" type="primary" style="margin-left: 10px;">
            <el-icon>
              <Operation/>
            </el-icon>
          </el-button>
          <el-menu
              default-active="/manageWelcomeInfo/start"
              class="el-menu-vertical-demo"
              :collapse="isCollapse"
              router="router"
              :default-openeds="['1']"
          >
            <el-menu-item index="/welcome">
              <el-icon>
                <HomeFilled/>
              </el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/manageWelcomeInfo/start">
              <el-icon>
                <House/>
              </el-icon>
              <span>开始</span>
            </el-menu-item>
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>迎新信息管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/manageWelcomeInfo/admissionInfos">
                  <el-icon>
                    <ChatLineRound/>
                  </el-icon>
                  录取信息列表
                </el-menu-item>
                <el-menu-item index="/manageWelcomeInfo/inRoomInfo">
                  <el-icon>
                    <OfficeBuilding/>
                  </el-icon>
                  学生入住信息
                </el-menu-item>
                <el-menu-item index="/manageWelcomeInfo/ordersInfo">
                  <el-icon>
                    <Trophy/>
                  </el-icon>
                  缴费管理
                </el-menu-item>
                <el-menu-item index="/manageWelcomeInfo/announcementInfos">
                  <el-icon>
                    <Message/>
                  </el-icon>
                  公告管理
                </el-menu-item>
                 <el-menu-item index="/manageWelcomeInfo/studentProgressInfo">
                  <el-icon><Memo /></el-icon>
                  学生进度
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </div>

        <el-container>
          <el-header>
            <div class="myhead" style="width: 1200px;
            display:flex;justify-content: space-between;align-items: center">
              <h1 style="color: yellow">信息管理</h1>
              <div class="full-screen">
                <el-icon size="20" color="yellow" @click="fresh">
                  <RefreshLeft/>
                </el-icon>
                <el-icon size="20" color="yellow" @click="fullScreen">
                  <FullScreen/>
                </el-icon>
              </div>
            </div>
          </el-header>
          <el-main>
            <router-view/>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
.el-aside {
  background-color: #d3dce6;
}

.el-header {
  background-color: rgb(67, 165, 225);
  height: 80px;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  height: 800px;
}

.el-menu {
  border-right: 0;
}

.el-icon {
  margin-right: 10px;
  cursor: pointer;
}
</style>
